<template>
<div class="inputRow">
  <div class="topRow flex">
    <div class="marginAuto0">我想</div>
    <p v-for="(item,index) in activity" :key="'activity'+index"
    @click="onActivityClick(item)">
      {{item}}
    </p>
  </div>
  <div class="flex main">
    <img src="@/assets/img/message/input1.png">
    <input type="text">
    <div class="flex">
      <img src="@/assets/img/message/input2.png">
      <img src="@/assets/img/message/input3.png">
      <img src="@/assets/img/message/input4.png">
    </div>
  </div>
</div>
</template>

<script>
import Vue from 'vue'
import {Toast} from 'vant'
Vue.use(Toast)
export default {
name: "inputRow",
  props:{
  activity:{
    type:Array
  }
  },
  methods:{
  onActivityClick(item){
    Toast(item)
  }
  }
}
</script>

<style lang="less" scoped>
.inputRow{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F3F3F3;
  .topRow::-webkit-scrollbar {display:none}
  .topRow{
    font-size: .45rem;
    overflow: scroll;
    padding: .2rem .2rem;
    div{
      flex-shrink: 0;
      color: #444444;
      margin-right: .2rem;
    }
    p{
      flex-shrink: 0;
      border-radius: .6rem;
      background-color: #fff;
      padding: .1rem .4rem;
      margin: 0 .1rem;
      color: #666666;
    }
  }
  .main{
    padding: .2rem 0;
    img{
      margin: auto 0;
      width: .8rem;
      height: .8rem;
      margin-right:.2rem;
    }
    img:first-child{
      margin: auto .2rem;
    }
    input{
      width: 3rem;
      padding: .2rem .2rem;
      font-size: .5rem;
      flex: 1;
      border: none;
      border-radius: .4rem;
    }
  }
}
</style>